@extends('admin.main')

@section('content')
<div class="wrapper wrapper-content">
	<div class="ibox float-e-margins">
		<div class="ibox-title">
			<h5>全景文件</h5>
		</div>
		<div class="ibox-content">
      <div>
        <a href="javascript:;" id="btnRefresh" class="btn btn-default m-l-xs"><i class="fa fa-refresh"></i> 刷新</a>
        <a href="javascript:;" id="btnUploadFile" class="btn btn-primary m-l-xs"><i class="fa fa-upload"></i> 上传全景图</a>
        <a href="javascript:;" id="btnReverse" class="btn btn-white m-l-xs"><i class="fa fa-exchange"></i> 反向选择</a>

        <a href="javascript:;" id="btnRemove" class="btn btn-danger m-l-xs"><i class="fa fa-trash"></i> 删除</a>
      </div>
      <table id="tblDataList" class="table table-hover">
        <thead>
          <tr>
            <th width="60"><input type="checkbox" id="checkAll" title="全选" /></th>
            <th>文件名</th>
            <th width="200"></th>
          </tr>
        </thead>
        <tbody id="tblData"></tbody>
      </table>
      <div class="text-center" id="pagination">
        <!-- <ul class="pagination m-n"></ul> -->
      </div>
		</div>
	</div>
</div>

<script id="tplDataListTr" type="text/html">
<%each data as row i%>
  <tr data-id="<%row.id%>">
    <td><input type="checkbox" name="ids" value="1" /></td>
    <td><a href="javascript:;" class="js-folderName"><%row.name%></a></td>
    <td></td>
    <td><%row.created_at%></td>
    <td align="right">
      <a href="javascript:;" class="label label-info m-r-xs js-preview">
        <i class="fa fa-camera-retro fa-lg"></i> 预览
      </a>
      <a href="javascript:;" class="label label-info m-r-xs js-rndir">
        <i class="fa fa-pencil-square-o fa-lg"></i> 改名
      </a>
      <a href="javascript:;" class="label label-danger m-r-xs js-rmdir">
        <i class="fa fa-trash fa-lg"></i> 删除
      </a>
    </td>
  </tr>
<%/each%>
</script>

<script id="tplRenFileName" type="text/html">
  <div class="row">
    <div class="col-md-3 text-right">
      <i class="fa fa-question-circle fa-4x"></i>
    </div>
    <div class="col-md-9">
      <label class="control-label">新文件名：</label>
      <input type="text" id="txtFolderName" value="<%name%>" class="form-control" autofocus />
    </div>
  </div>
</script>

<script id="tplcontainer" type="text/html">
  <div class="row" id="container">
   
  </div>
</script>

<script id="tplFolderZtree" type="text/html">
  <ul id="zTreeFolder" class="ztree"></ul>
</script>

<script id="tplUploadPanel" type="text/html">
  <div id="uploader">
    <div class="queueList">
      <div id="dndArea" class="placeholder">
        <div id="filePicker"></div>
        <p>或将照片拖到这里，单次最多可选20张</p>
      </div>
    </div>
    <div class="statusBar" style="display:none;">
      <div class="progress">
        <span class="text">0%</span>
        <span class="percentage"></span>
      </div><div class="info"></div>
      <div class="btns">
        <div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
      </div>
    </div>
  </div>
</script>
@endsection

@section('pageheader')
<link href="{{asset('assets/WebUploader/webuploader.css')}}" rel="stylesheet" />
<link href="{{asset('assets/WebUploader/myuploader.css')}}" rel="stylesheet" />
<link href="{{asset('assets/fancybox/jquery.fancybox.css')}}" rel="stylesheet" />
<link href="{{asset('assets/zTree/css/myStyle/myStyle.css')}}" rel="stylesheet" />
<style>
  #zTreeFolder{padding: 10px; border: 1px solid #ccc;}
</style>
@endsection

@section('pagescript')
<script src="{{asset('assets/WebUploader/webuploader.js')}}"></script>
<script src="{{asset('assets/fancybox/jquery.fancybox.pack.js')}}"></script>
<script src="{{asset('assets/zTree/js/jquery.ztree.core-3.5.js')}}"></script>
<script src="{{asset('assets/zTree/js/jquery.ztree.exedit-3.5.js')}}"></script>
<script src="http://cdn.bootcss.com/three.js/r63/three.min.js"></script>
<script src="{{asset('assets/quanjing/js/photo-sphere-viewer.min.js')}}"></script>
<script src="{{asset('assets/quanjing/js/example1.js')}}"></script>
<script>
  $("#sidebar li[rel='view']").addClass("active");

  var artDialog;
  template.helper('getRealSize', getRealSize);

  //全选
  $("#checkAll").on("click", function(){
    var that = this;
    $("input[name='ids']").each(function(){
      this.checked = that.checked;
    });
  });

  //刷新
  $("#btnRefresh").on("click", function(){
    renderList();
  });

  $("#btnReverse").on("click", function(){
    $("input[name='ids']").each(function(){
      this.checked = ! this.checked;
      var m = $(".filesListTr").size();
      var n = $(".filesListTr input:checked").size();
      $("#checkAll").prop("checked", (m === n));
    });
  });

  var filter = {limit:10, page:1};
  var renderList = function(){
    $.get("{{url('admin/view/page-rows')}}", filter, function(data){
      $("#tblData").html(template("tplDataListTr", data));
      $("#pagination").html(page2(data.last_page, data.per_page, data.to));
    }).fail(failure);
  };
  renderList();

  //分页
  $('body').delegate("#pagination li a",'click',function(){
      filter.page = $(this).attr('rel');
      renderList();
  });



  var WebUploadInit = function(){
    jQuery(function() {
      var $ = jQuery,    // just in case. Make sure it's not an other libaray.
      $wrap = $('#uploader'),
      // 图片容器
      $queue = $('<ul class="filelist"></ul>')
      .appendTo($wrap.find('.queueList') ),
      // 状态栏，包括进度和控制按钮
      $statusBar = $wrap.find('.statusBar'),
      // 文件总体选择信息。
      $info = $statusBar.find('.info'),
      // 上传按钮
      $upload = $wrap.find('.uploadBtn'),
      // 没选择文件之前的内容。
      $placeHolder = $wrap.find('.placeholder'),
      // 总体进度条
      $progress = $statusBar.find('.progress').hide(),
      // 添加的文件数量
      fileCount = 0,
      // 添加的文件总大小
      fileSize = 0,
      // 优化retina, 在retina下这个值是2
      ratio = window.devicePixelRatio || 1,
      // 缩略图大小
      thumbnailWidth = 110 * ratio,
      thumbnailHeight = 110 * ratio,
      // 可能有pedding, ready, uploading, confirm, done.
      state = 'pedding',
      // 所有文件的进度信息，key为file id
      percentages = {},
      supportTransition = (function(){
        var s = document.createElement('p').style,
        r = 'transition' in s ||
        'WebkitTransition' in s ||
        'MozTransition' in s ||
        'msTransition' in s ||
        'OTransition' in s;
        s = null;
        return r;
      })(),
      // WebUploader实例
      uploader;
      if ( ! WebUploader.Uploader.support() ) {
        alert('Web Uploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器');
        throw new Error('WebUploader does not support the browser you are using.' );
      }
      // 实例化
      uploader = WebUploader.create({
        pick: {
          id: '#filePicker',
          label: '点击选择文件'
        },
        dnd: '#uploader .queueList',
        paste: document.body,
        accept: {
          title: 'Images',
          extensions: 'gif,jpg,jpeg,bmp,png',
          mimeTypes: 'image/*'
        },
        swf: "{{asset('assets/WebUploader/Uploader.swf')}}",
        disableGlobalDnd: true,
        chunked: true,
        server: "{{url('admin/view/upload-file')}}",
        fileNumLimit: 20,
        fileSizeLimit: 100 * 1024 * 1024,
        fileSingleSizeLimit: 20 * 1024 * 1024,
        formData: {}
      });
      // 添加“添加文件”的按钮，
      uploader.addButton({
        id: '#filePicker2',
        label: '继续添加'
      });
      // 当有文件添加进来时执行，负责view的创建
      function addFile(file ) {
        var $li = $('<li id="' + file.id + '">' +
          '<p class="title">' + file.name + '</p>' +
          '<p class="imgWrap"></p>'+
          '<p class="progress"><span></span></p>' +
        '</li>' ),
        $btns = $('<div class="file-panel">' +
        '<span class="cancel">删除</span>' +
        '<span class="rotateRight">向右旋转</span>' +
        '<span class="rotateLeft">向左旋转</span></div>').appendTo($li),
        $prgress = $li.find('p.progress span'),
        $wrap = $li.find('p.imgWrap'),
        $info = $('<p class="error"></p>'),
        showError = function(code) {
          switch(code) {
            case 'exceed_size':
              text = '文件大小超出';
              break;
            case 'interrupt':
              text = '上传暂停';
              break;
            default:
              text = '上传失败，请重试';
              break;
          }
          $info.text(text).appendTo($li);
        };
        if (file.getStatus() === 'invalid') {
          showError(file.statusText);
        } else {
          $wrap.text('预览中');
          uploader.makeThumb(file, function(error, src){
          if (error) {
            $wrap.text('不能预览');
            return;
          }
          var img = $('<img src="'+src+'" />');
          $wrap.empty().append(img);
          }, thumbnailWidth, thumbnailHeight );
          percentages[file.id] = [file.size, 0];
          file.rotation = 0;
        }
        file.on('statuschange', function(cur, prev) {
          if (prev === 'progress') {
            $prgress.hide().width(0);
          }else if (prev === 'queued') {
            $li.off('mouseenter mouseleave');
            $btns.remove();
          }
          if (cur === 'error' || cur === 'invalid' ) {
            showError( file.statusText );
            percentages[ file.id ][ 1 ] = 1;
          } else if (cur === 'interrupt' ) {
            showError( 'interrupt' );
          } else if (cur === 'queued' ) {
            percentages[ file.id ][ 1 ] = 0;
          } else if (cur === 'progress' ) {
            $info.remove();
            $prgress.css('display', 'block');
          } else if (cur === 'complete' ) {
            $li.append('<span class="success"></span>');
          }
          $li.removeClass('state-' + prev).addClass('state-' + cur);
        });
        $li.on('mouseenter', function() {
          $btns.stop().animate({height: 30});
        });
        $li.on('mouseleave', function() {
          $btns.stop().animate({height: 0});
        });
        $btns.on('click', 'span', function() {
          var index = $(this).index(), deg;
          switch (index) {
            case 0:
              uploader.removeFile( file );
              return;
            case 1:
              file.rotation += 90;
              break;
            case 2:
              file.rotation -= 90;
              break;
          }
          if (supportTransition) {
            deg = 'rotate(' + file.rotation + 'deg)';
            $wrap.css({
              '-webkit-transform': deg,
              '-mos-transform': deg,
              '-o-transform': deg,
              'transform': deg
            });
          } else {
            $wrap.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')');
          }
        });
        $li.appendTo( $queue );
      }
      function removeFile(file) {
        var $li = $('#'+file.id);
        delete percentages[ file.id ];
        updateTotalProgress();
        $li.off().find('.file-panel').off().end().remove();
      }
      function updateTotalProgress() {
        var loaded = 0,
        total = 0,
        spans = $progress.children(),
        percent;
        $.each(percentages, function(k, v){
          total += v[0];
          loaded += v[0] * v[1];
        });
        percent = total ? loaded / total : 0;
        spans.eq( 0 ).text( Math.round( percent * 100 ) + '%' );
        spans.eq( 1 ).css( 'width', Math.round( percent * 100 ) + '%' );
        updateStatus();
      }
      function updateStatus() {
        var text = '', stats;
        if ( state === 'ready' ) {
          text = '选中' + fileCount + '张图片，共' +
          WebUploader.formatSize( fileSize ) + '。';
        } else if ( state === 'confirm' ) {
          stats = uploader.getStats();
          if ( stats.uploadFailNum ) {
            text = '已成功上传' + stats.successNum+ '张照片至XX相册，'+
            stats.uploadFailNum + '张照片上传失败，<a class="retry" href="#">重新上传</a>失败图片或<a class="ignore" href="#">忽略</a>'
          }

        } else {
          stats = uploader.getStats();
          text = '共' + fileCount + '张（' +
          WebUploader.formatSize( fileSize )  +
          '），已上传' + stats.successNum + '张';
          if ( stats.uploadFailNum ) {
            text += '，失败' + stats.uploadFailNum + '张';
          }
        }
        $info.html( text );
      }
      function setState(val) {
        var file, stats;
        if (val === state) return;
        $upload.removeClass( 'state-' + state );
        $upload.addClass( 'state-' + val );
        state = val;
        switch ( state ) {
          case 'pedding':
            $placeHolder.removeClass( 'element-invisible' );
            $queue.parent().removeClass('filled');
            $queue.hide();
            $statusBar.addClass( 'element-invisible' );
            uploader.refresh();
            break;
          case 'ready':
            $placeHolder.addClass( 'element-invisible' );
            $( '#filePicker2' ).removeClass( 'element-invisible');
            $queue.parent().addClass('filled');
            $queue.show();
            $statusBar.removeClass('element-invisible');
            uploader.refresh();
            break;
          case 'uploading':
            $( '#filePicker2' ).addClass( 'element-invisible' );
            $progress.show();
            $upload.text( '暂停上传' );
            break;
          case 'paused':
            $progress.show();
            $upload.text( '继续上传' );
            break;
          case 'confirm':
            $progress.hide();
            $upload.text( '开始上传' ).addClass( 'disabled' );
            stats = uploader.getStats();
            if ( stats.successNum && !stats.uploadFailNum ) {
              setState( 'finish' );
              return;
            }
            break;
          case 'finish':
            stats = uploader.getStats();
            if (stats.successNum) {
              alert('上传成功');
              renderList(filter);
            } else {
              state = 'done';
            }
            break;
        }
        updateStatus();
      }
      uploader.onUploadProgress = function( file, percentage ) {
        var $li = $('#'+file.id),
        $percent = $li.find('.progress span');
        $percent.css( 'width', percentage * 100 + '%' );
        percentages[ file.id ][ 1 ] = percentage;
        updateTotalProgress();
      };
      uploader.onFileQueued = function( file ) {
        fileCount++;
        fileSize += file.size;
        if ( fileCount === 1 ) {
          $placeHolder.addClass( 'element-invisible' );
          $statusBar.show();
        }
        addFile( file );
        setState( 'ready' );
        updateTotalProgress();
      };
      uploader.onFileDequeued = function( file ) {
        fileCount--;
        fileSize -= file.size;
        if ( !fileCount ) {
          setState( 'pedding' );
        }
        removeFile( file );
        updateTotalProgress();
      };
      uploader.on( 'all', function( type ) {
        var stats;
        switch( type ) {
          case 'uploadFinished':
            setState( 'confirm' );
            break;
          case 'startUpload':
            setState( 'uploading' );
            break;
          case 'stopUpload':
            setState( 'paused' );
            break;
        }
      });
      uploader.onError = function( code ) {
        alert('Eroor: ' + code);
      };
      $upload.on('click', function() {
        if ( $(this).hasClass( 'disabled' ) ) {
          return false;
        }
        if ( state === 'ready' ) {
          uploader.upload();
        } else if ( state === 'paused' ) {
          uploader.upload();
        } else if ( state === 'uploading' ) {
          uploader.stop();
        }
      });
      $info.on( 'click', '.retry', function() {
        uploader.retry();
      } );
      $info.on( 'click', '.ignore', function() {
        alert('todo');
      });
      $upload.addClass( 'state-' + state );
      updateTotalProgress();
    });
  };

  $("#btnUploadFile").on("click", function(){
    dialog({
      title: "上传文件",
      content: template("tplUploadPanel", null),
      width: "700px",
      onshow: WebUploadInit
    }).showModal();
  });

  //预览
  $("#tblDataList").delegate(".js-preview", "click", function(){
    var id = $(this).parents("tr").eq(0).data("id");
    $.get("{{url('admin/view/preview')}}", {'id':id}, function(data){
        dialog({
          title: '预览',
          content: template("tplcontainer"),
          width: "1000px",
          height:"500",
        }).showModal();
        loadPredefinedPanorama('/'+data.pic);
    }).fail(failure);
  });

  //编辑
  $("#tblDataList").delegate(".js-rndir", "click", function(){
    var id = $(this).parents("tr").eq(0).data('id');
    var obj = $(this).parents("tr").eq(0).find(".js-folderName");
    var name = obj.text().replace(/\"/g, "&quot;");
    dialog({
      title: '文件夹改名',
      content: template("tplRenFileName", {'name':name}),
      ok: function(){
        var result = $("#txtFolderName").val();
        if(required_check(result) == false){
          $("#txtFolderName").focus();
          return false;
        }
        if(result == name) return true;
        $.post("{{url('admin/view/rndir')}}", {"id":id,"name":result}, function(data){
          obj.text(data.name);
        }).fail(failure);
      },
      width: "400px"
    }).showModal();
  });

  //拖拽前执行
  var dragpId;
  var zTreeBeforeDrag = function(treeId, treeNodes) {
    for(var i = 0, l = treeNodes.length; i < 1; i++){
      dragpId = treeNodes[i].pId;
      if(treeNodes[i].drag == false){
        return false;
      }
    }
    return true;
  };

  //拖拽释放之后执行
  var zTreeBeforeDrop = function(treeId, treeNodes, targetNode, moveType) {
    if(targetNode.pId != dragpId){
      return false;
    }
    var data = {'id':treeNodes[0].id,'targetId':targetNode.id,'moveType':moveType};
    $.post("{{url('admin/userfiles/change-sort-by-ztree')}}", data, function(result){
      return true;
    }).fail(failure);
  };

  var loadTreeList = function(zNodes) {
    var setting = {
      view: {dblClickExpand: false, selectedMulti: false, showLine: false},
      edit: {enable:true,showRemoveBtn:false,showRenameBtn:false,drag:{autoExpandTrigger: true, isCopy: false,isMove: true, prev : true, inner: false, next : true}},
      data: {simpleData: {enable: true, rootPId: '0'}},
      callback: {'beforeDrag':zTreeBeforeDrag,'beforeDrop':zTreeBeforeDrop}
    };
    $.fn.zTree.init($("#zTreeFolder"), setting, zNodes);
    var treeObj = $.fn.zTree.getZTreeObj("zTreeFolder");
    var treeNodes = treeObj.getNodes();
    if(treeNodes.length > 0){
      treeObj.selectNode(treeNodes[0]);
    }
  };

  //删除
  $("#tblDataList").delegate(".js-rmdir", "click", function(e){
    var id = $(this).parents("tr").eq(0).data('id');
    dialog({
      content: '<i class="fa fa-question-circle fa-4x"></i> 您确定要删除此文件夹吗？',
      ok: function(){
        $.post("{{url('admin/view/remove-file')}}", {'ids':id}, function(data){
          renderList();
        }).fail(failure);
      },
      cancel: true
    }).showModal();
  });

  //批量删除
  $("#btnRemove").on("click", function(){
    var keys = new Array();
    $("input[name='ids']").each(function(){
      if($(this).prop("checked")){
        keys.push($(this).parents("tr").eq(0).data("id"));
      }
    });
    var keyValue = keys.join("|");
    if(keyValue){
      dialog({
        content: '<i class="fa fa-question-circle fa-4x"></i> 即将删除所选择文件, 且该操作不能恢复! 是否继续 ?',
        ok: function(){
          $.post("{{url('admin/view/remove-file')}}", {"ids":keyValue}, function(){
            renderList();
          }).fail(failure);
        },
        cancel: true
      }).showModal();
    }else{
      failure('请先选择准备删除的文件！');
    }
  });
</script>
@endsection
